import { Breadcrumb } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import './style.less';

const prefixCls = 'inbiz-cBread';

const BreadcrumbView = (props: any) => {
  const { onClickItem, data, labelKey = 'name' } = props;
  const getLabel = (item: any) =>
    typeof labelKey == 'function' ? labelKey(item) : item[labelKey];
  return (
    <div className={`${prefixCls}`}>
      <Breadcrumb separator={<RightOutlined />}>
        {data &&
          data.map((item: any, index: any) => (
            <Breadcrumb.Item
              onClick={(e) => onClickItem(item, e)}
              key={index}
              overlay={item.overlay}
              dropdownProps={item.dropdownProps}
              title={item.name}
            >
              <span
                style={{
                  color:
                    data.length == 1
                      ? 'var(--inbiz-color-primary)'
                      : data.length == index + 1
                      ? 'var(--inbiz-color-primary)'
                      : 'rgba(0, 0, 0, 0.45)',
                }}
              >
                {getLabel(item)?.length > 30
                  ? getLabel(item).slice(0, 30) + '...'
                  : getLabel(item)}
              </span>
            </Breadcrumb.Item>
          ))}
      </Breadcrumb>
    </div>
  );
};

export default BreadcrumbView;
